import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity,
	PixelRatio, Image, FlatList
} from "react-native";
import { API, API_GENERATE } from '../../../config/api';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
const scale = GLOBAL.SCALE;
import HTTP from '../../../utils/http'
export class IntentionProductListPage extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '商品列表',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};


	constructor(props) {
		super(props);
		let { pushIndex, orderId } = props.navigation.state.params;
		this.data = {
			params: {
				orderId: orderId
			},
		}
		this.state = {
			newLotData: [],  // 待审批
			status: 'loading',
			loadIcon: false,  // 下拉涮新的 图标
			selectIndex: pushIndex
		}
		this.pageNo = 1;
		this.totalPage = 1;
	}

	componentWillMount () {
		this._getListData();
	}

	//获取列表
	async _getListData (agentObj) {
		let sendData = {
			onrefresh: false,
			pageNo: 1,
			queryType: 'ORDER_ITEM_LIST',
			orderId: this.data.params.orderId
			//status: 'EXECUTING'   //  执行中
		}
		console.log('send', sendData)
		Object.assign(sendData, agentObj);
		this.setState({
			loadIcon: true
		})
		console.log(this.data.params.orderId, 'orderId')
		let responseData = await HTTP.POST(API_GENERATE(API.ORDER_DETAIL), sendData);
		this.setState({
			loadIcon: false
		});
		if (responseData) {
			this.totalPage = responseData.totalPage;
			if (sendData.onrefresh) {  // 加载
				this.setState({
					newLotData: this.state.newLotData.concat(responseData.rows),
					status: 'data'
				})
			} else { // 刷新
				this.setState({
					newLotData: responseData,
					status: responseData.length ? 'data' : 'empty'
				})
			}
		} else {
			this.setState({
				status: 'error'
			})
		}
	}

	// 下拉更新函数
	_isLoadRefresh () {
		this._getListData();
	}

	//上拉加载
	_loadData () {
		if (this.totalPage > this.pageNo) {
			this.pageNo++;
			this._getListData({
				pageNo: this.pageNo,
				onrefresh: true
			});
		}
	}

	//数据加载出错回调
	_onErrorPress = () => {
		this.setState({
			status: 'loading'
		}, function () {
			this._getListData();
		})
	}

	//选中
	_selectFn = (index, itemData) => {
		this.setState({
			selectIndex: index
		}, function () {
			let This = this;
			setTimeout(() => {
				This.props.navigation.state.params.callBack(itemData);
				This.props.navigation.goBack();
			})
		})
	}


	// 一条数据
	_renderItem (data) {
		let { goodsName, price, quantity, priceFormulaDesc, udPrice } = data.item;
		let { selectIndex } = this.state;
		let index = data.index;
		let buyImg = require('../../../imgs/Group5.png');
		let sellImg = require('../../../imgs/Group4.png');
		return (
			<TouchableOpacity onPress={() => { this._selectFn(index, data.item) }}>
				<View style={styles.exBox}>
					{selectIndex == index ? (
						<Image source={require('../../../imgs/apply/selectLong.png')} style={styles.imgPosition} />
					) : null}
					<View style={styles.exHead}>
						<View style={styles.exHeadLeft}>
							<Text style={styles.exHeadTitle}>{goodsName}</Text>
						</View>
					</View>
					<View style={styles.exContent}>
						<View style={[styles.exComItem]}>
							<Text style={styles.exName}>数量：</Text>
							<Text style={styles.exValue} numberOfLines={1}>{quantity}</Text>
						</View>
						<View style={[styles.exComItem]}>
							<Text style={styles.exName}>价格：</Text>
							<Text style={styles.exValue} numberOfLines={1}>{price}</Text>
						</View>
						<View style={[styles.exComItem]}>
							<Text style={styles.exName}>结算价：</Text>
							<Text style={styles.exValue} numberOfLines={1}>{priceFormulaDesc}</Text>
						</View>
						<View style={[styles.exComItem]}>
							<Text style={styles.exName}>升贴水：</Text>
							<Text style={styles.exValue} numberOfLines={1}>{udPrice}</Text>
						</View>
					</View>
				</View>
			</TouchableOpacity>
		)
	}


	render () {
		let { status } = this.state;
		return (
			<View style={styles.container}>
				{
					status == 'data' ? (
						<View style={styles.listBox}>
							<FlatList
								data={this.state.newLotData}
								renderItem={(data) => this._renderItem(data)}
								refreshing={this.state.loadIcon}
								onRefresh={this._isLoadRefresh.bind(this)}
								onEndReachedThreshold={1}
								onEndReached={() => { this._loadData(); }}
							/>
						</View>
					) : null
				}
				<PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this._onErrorPress} />
			</View >
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.light,
	},
	exBox: {
		height: 140 * scale,
		backgroundColor: '#fff',
		marginTop: 12 * scale
	},
	exHead: {
		height: 44 * scale,
		marginLeft: 12 * scale,
		marginRight: 12 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderTopColor: style.color.gray,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	exHeadLeft: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	exHeadImg1: {
		width: 16 * scale,
		height: 16 * scale,
		marginRight: 5 * scale
	},
	exHeadTitle: {
		fontSize: 14 * scale,
		color: '#222',
		marginRight: 5 * scale
	},
	longTime: {
		color: style.color.white,
		backgroundColor: '#49CAFF',
		fontSize: 11 * scale,
		height: 16 * scale,
		lineHeight: 16 * scale,
		borderRadius: 4 * scale,
		marginRight: 5 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 5 * scale
	},
	exHeadImg2: {
		height: 12 * scale,
		width: 18 * scale,
	},
	exHeadHref: {
		fontSize: 13 * scale,
		color: style.color.extheme
	},
	exContent: {
		flexDirection: 'row',
		flexWrap: 'wrap',
		marginLeft: 12 * scale,
		marginRight: 12 * scale,
		paddingTop: 10 * scale,
	},
	exComItem: {
		width: '50%',
		flexDirection: 'row',
		alignItems: 'center',
	},
	exComItemTe: {
		width: '100%'
	},
	exName: {
		fontSize: 12 * scale,
		color: style.color.inputPlaceholderColor,
		lineHeight: 26 * scale
	},
	exValue: {
		color: style.color.normal,
		marginHorizontal: 5,
		flexShrink: 1
	},
	listBox: {
		//	flex: 1,
		//	paddingBottom: 60 * scale
	},
	imgPosition: { position: 'absolute', bottom: 0, right: 12 * scale }

})